<template>
  <div id="increase">
    <u-head :title="tit"></u-head>
    <van-cell-group>
      <van-field
        v-model="form.username"
        label="收货人"
        placeholder="请输入收货人姓名"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="form.userphone"
        label="手机号码"
        placeholder="请输入手机号码"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="form.location"
        label="所在地"
        placeholder="点击添加地址"
        disabled
        @click="open"
      />
      <van-area @cancel='onCancel' @confirm='onConfirm' id='area' v-if="flag" title="收货地址选择" :area-list="areaList" />
    </van-cell-group>
    <div class="xiangxi">
      <div>详细地址</div>
      <input v-model="form.useraddress" type="text" id="text" />
    </div>
    <div class="biaoqian">
      <van-radio-group
        class="biaoqian_box"
        v-model="form.label"
        direction="horizontal"
      >
        <span>标签:</span>
        <van-radio name="家" value='家'>家</van-radio>
        <van-radio name="公司" value='公司'>公司</van-radio>
        <van-radio name="学校" value='学校'>学校</van-radio>
      </van-radio-group>
    </div>
    <div class="default">
      <div class="default_box">
        <span>设置默认地址</span>
        <span>提醒：每次下单都会推荐使用默认地址</span>
      </div>
      <van-switch
        v-model="form.status"
        active-color="#ee0a24"
        inactive-color="#dcdee0"
      />
    </div>
    <div class="baocun">
      <van-button @click='save' class="sure" color="red" type="round" size="large"
        >保存并且使用</van-button
      >
      <van-button @click="reset" type="round" size="large">重置</van-button>
    </div>
  </div>
</template>
<script>
import uHead from "../components/public/uHead.vue";
import { addAddressApi } from '@/api/orders/orders'
import { areaList } from '@vant/area-data';
export default {
  components: {
    uHead,
  },
  data() {
    return {
      tit: "新增地址",
      flag: false,
      areaList,
      form:{
        uid: '',
        username: '',
        userphone: '',
        regioncode: '',
        location: '',
        useraddress: '',
        status: false,
        label: ''
      }
    };
  },
  methods:{
    //重置表单
    reset(){
      this.form={
        uid: '',
        username: '',
        userphone: '',
        regioncode: '',
        location: '',
        useraddress: '',
        status: false,
        label: ''
      }
    },
    open(){
      this.flag=true
    },
    onCancel(){
      this.flag=false
    },
    onConfirm(value){
      let str=''
      value.forEach(item=>{
        str+=item.name
      })
      this.form.location=str
      this.flag=false
    },
    //保存
    async save(){
      let uid=JSON.parse(localStorage.getItem('user')).uid
      this.form.uid=uid
      let res=await addAddressApi(this.form)
      if(res.code==200){
        alert(res.msg)
        this.reset()
      }else{
        alert(res.msg)
      }
    }
  }
};
</script>
<style scoped>
#increase {
  max-width: 7.5rem;
}
.xiangxi {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#text {
  width: 70%;
  height: 100px;
  background: #ccc;
}
.biaoqian {
  margin-top: 1rem;
}
.biaoqian_box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.default {
  width: 100%;
  margin-top: 0.5rem;
  height: 0.8rem;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
}
.default_box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.baocun{
    width: 100%;
    position: fixed;
    bottom: 0.3rem;
    left: 0;
}
.sure{
    margin-bottom: 0.2rem;
}
#area{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #ccc;
  z-index: 999;
}
</style>
